<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>02 - ol4加载百度离线地图</title>
    <!--    <script src='../lib/bd09.js'></script>-->
    <script src='../lib/gcoord.js'></script>
    <script src='../lib/ol4/ol4.js'></script>
    <link rel='stylesheet' href='../css/ol4/ol.css'>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #map {
            width: auto;
            height: 100%;
        }
    </style>
</head>
<body>
<div id='map'></div>
</body>
<script>
	const projectionBD09 = new ol.proj.Projection({
		code: 'BD:09',
		extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17],
		units: '',
		axisOrientation: 'neu',
		global: false
	});
	ol.proj.addProjection(projectionBD09);
	ol.proj.addCoordinateTransforms('EPSG:4326', 'BD:09', coordinate => {
		return lngLatToMercator(coordinate);
	}, (coordinate => {
		return mercatorToLngLat(coordinate);
	}));
	console.log(ol.proj.get('BD:09'));
	const tileSize = 512;
	const projectionExtentInBD09 = projectionBD09.getExtent();
	const size = ol.extent.getWidth(projectionExtentInBD09) / tileSize;

	const resolutions = [];
	const maxZoom = 18;
	const minZoom = 0;
	// 计算百度使用的分辨率
	for (let i = minZoom; i <= maxZoom; i++) {
		resolutions[i] = Math.pow(2, maxZoom - i);
	}
	console.log(resolutions);

	const tileGrid = new ol.tilegrid.TileGrid({
		origin: [0, 0],
		resolutions: resolutions,
		extent: projectionExtentInBD09
		// tileSize: [512, 512]
	});

	const baiduSource = new ol.source.TileImage({
		projection: 'BD:09',
		tileGrid: tileGrid,
		tileUrlFunction: (tileCoord) => {
			let [z, x, y] = tileCoord;
			// return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=pl&udt=20210407`;
			return `http://maponline0.bdimg.com/starpic/?qt=satepc&u=x={x};y={y};z={z};v=009;type=sate&fm=46&udt=20230309`;
		}
	});
	// 百度地图层
	const baiduMapLayer = new ol.layer.Tile({
		source: baiduSource
	});
	// 邢台 - [114.507435,37.074612] ; 北京 - [116.384722, 39.889916]; 南京 - 【118.802997,32.093289】; 杭州 - 120.176703,30.24834
	//
	const centerPoint = [120.0109015400155, 30.281957017658442];
	// let circlePoint = ol.proj.transform(centerPoint, 'EPSG:4326', 'BD:09');
	let circlePoint1 = [12615725.935288077, 2632722.9024366173];
	let circlePoint = gcoord.transform(centerPoint, gcoord.WGS84, gcoord.BD09MC);
	console.log(circlePoint1, circlePoint);

	let img = document.createElement('img');
	img.style.cursor = 'pointer'; //鼠标样式置为pointer
	img.src = '../image/position_orange.png';

	const overlayer = new ol.Overlay({
		element: img,
		autoPan: false,
		positioning: 'top-left',
		position: circlePoint,
		offset: [30, 30],
		stopEvent: false //如果未设置该属性，html元素的事件无法绑定上
	});

	const map = new ol.Map({
		layers: [
			baiduMapLayer
		],
		target: 'map',
		view: new ol.View({
			center: circlePoint,
			projection: 'BD:09',
			zoom: 17,
			maxZoom: 18,
			minZoom: 1,
			resolutions
		})
	});

	map.addOverlay(overlayer);

	const iconFeature = new ol.Feature({
		geometry: new ol.geom.Point(circlePoint)
	});

	const iconStyle = new ol.style.Style({
		image: new ol.style.Icon(
			/** @type {olx.style.IconOptions} */ ({
				anchor: [10, 26],
				anchorXUnits: 'pixels',
				anchorYUnits: 'pixels',
				src: '../image/position_orange.png'
			})
		)
	});

	iconFeature.setStyle(iconStyle);

	/*	function styleFun(feature, resolution) {
            console.log(feature, resolution);
            console.log(feature.getStyle());
            return iconStyle;
        }*/

	//
	// console.log(styleFun);

	// iconFeature.setStyle(styleFun.call(this,iconFeature))

	// iconFeature.setStyle(iconStyle);
	/*iconFeature.setStyle(function (feature, resolution) {
		// console.log(feature, resolution);
		// console.log('=======1', iconStyle);
		// console.log('=======2', feature);
		// console.log('=======3', feature.getStyleFunction());
		const image = iconStyle.getImage();
		// // console.log(image, image.setRotation, image.getSize());
		// iconStyle.getImage().setScale(1 / Math.pow(resolution, 1 / 3))
		iconStyle.getImage().setScale(map.getView().getZoom() / 100);
		// image.setRotation(10 * Math.PI / 180)   // 弧度制
		return iconStyle;
	});*/

	// console.log(typeof iconFeature.getStyle(), iconFeature.getStyle()());

	const vectorSource = new ol.source.Vector({
		features: [iconFeature]
	});

	const iconLayer = new ol.layer.Vector({
		source: vectorSource
	});

	map.addLayer(iconLayer);

</script>
</html>
